/**
 * 匠言知识付费v2.0.0
 * Author: 山西匠言网络科技有限公司
 * 这不是一个免费软件，它受限于许可条款，你可以访问https://www.zsfzxkc.cn/获取更多详细信息。
 * This is not a free software, it under the license terms, you can visit https://www.zsffzxkc.cn/ get more details.
 */
<template>
	<view class="container">
		
		<view class="allcommodity">
			<image src="../../../static/dujiajingxuan.png" mode="aspectFit"></image>
			<!-- <text>全部商品</text> -->
		</view>
		
		
		<!-- 商品列表 -->
		<view class="shop-list">
			<view @click="goShopDetails(item.id)" class="shop-list-item" v-for="item in commodityList" :key="item.id">
				<image class="item-top" :src="item.main_thumb" mode="aspectFit"></image>
				<view class="item-bottom">
					<text class="title">{{item.name}}</text>
					<text class="content">热销{{item.sales}}件</text>
					<view class="price">
						<view class="price-left">
							<text>￥{{item.price}}</text>
							<text>￥{{item.oldprice}}</text>
						</view>
						<image class="price-right" src="../../../static/gouwuche.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 加载 -->
		<uni-load-more style="margin-bottom:25upx;" :status="loading_status" showIcon iconType></uni-load-more>
	</view>
</template>

<script>
	import { postSonflGoodslist } from '@/request/shopping.js'
	export default {
		data() {
			return {
				HOST_URL:uni.HOST_URL,
				commodityList: [],
				page:0,
				loading_status:'more',
				contentText:{contentdown: "上拉加载更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"},
			};
		},
		onReachBottom(){
			this.loading_status= 'loading'
			setTimeout(() => {
				// this.get_pxblist(this.lat,this.lng,this.citycode,this.page,this.flid)
				this.loading_status= 'more'
			}, 1000)
			this.page++
		},
		onLoad(option) {
			postSonflGoodslist({goodstype: option.goodstype, flid: option.flid, sonflid: option.sonflid}).then(res => {
				console.log(res)
				this.commodityList = res.data.data
			})
		},
		methods: {
			// 去商品详情页
			goShopDetails(id) {
				// uni.setStorageSync('commodityList', this.commodityList)
				uni.navigateTo({
					url: `/pages/mall/shop-details/shop-details?id=${id}`
				});
			}
		}
	}
</script>

<style lang="less" scoped>

.allcommodity {
	display: flex;
	align-items: center;
	padding-top: 50upx;
	margin-left: 20upx;
	image {
		width: 140upx;
		height: 40upx;
	}
	text {
		font-size: 32upx;
		color: #333;
		margin-left: 10upx;
		letter-spacing: 2upx;
	}
}


// 商品列表
.shop-list {
	margin-top: 38upx;
	padding: 0 20upx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	&-item {
		width: 346upx;
		height: 490upx;
		margin-bottom: 16upx;
		background-color: #fff;
		border-radius: 20upx;
		overflow: hidden;
		.item-top {
			width: 346upx;
			height: 305upx;
		}
		.item-bottom {
			padding-left: 15upx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			.title {
				margin-top: 20upx;
				font-size: 26upx;
				font-weight: 700;
				color: #181818;
				display: inline-block;
				white-space: nowrap;
				overflow: hidden;
				text-overflow:ellipsis;
			}
			.content {
				font-size: 24upx;
				color: #7e7e7e;
				margin-top: 15upx;
			}
			.price {
				margin-top: 20upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				&-left {
					text:nth-child(1) {
					font-size: 28upx;
					font-weight: 700;
					color: #ff1e2e;
					}
					text:nth-child(2) {
						font-size: 22upx;
						color: #b0b0b0;
						margin-left: 15upx;
					}
				}
				&-right {
					width: 42upx;
					height: 38upx;
					margin-right: 20upx;
				}
			}
		}
	}
}

</style>
